
<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="Title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main
        v-loading="submitLoading"
        :style="{ 'max-height': maxHeightDialog }"
        :element-loading-text="submitLoading ? '提交中...' : '加载中...'"
        class="container-main"
      >
        <el-form
          ref="gatewayForm"
          size="small"
          label-position="right"
          :model="form"
          :rules="rules"
          label-width="33%"
        >
          <div>
            <div class="title">
              <span>填写信息</span>
            </div>
            <el-card
              class="card"
              shadow="never"
              style="background: #fafafa; min-height: 450px"
            >
              <div style="margin-left: -12px; margin-right: -12px">
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="所属部门">
                      <treeselect
                        v-model="form.deptGuid"
                        placeholder="选择所属部门"
                        :options="deptTreeDataList"
                        :default-expand-level="Infinity"
                        style="width: 100%"
                        @select="onDepSelect"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="所属网格">
                      <treeselect
                        v-model="form.gridMount"
                        placeholder="选择所属网格"
                        :options="gridTreeDataList"
                        :default-expand-level="Infinity"
                        style="width: 100%"
                        @select="onGridSelect"
                      >
                        <div slot="value-label" slot-scope="{ node }">
                          {{ node.raw.fullPathText }}
                        </div>
                      </treeselect>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="网关名称" prop="gatewayName">
                      <el-input
                        v-model="form.gatewayName"
                        placeholder="请输入网关名称"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="网关型号" prop="gatewayModel">
                      <el-input
                        v-model="form.gatewayModel"
                        placeholder="输入网关型号"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="18">
                    <el-form-item label="SN号" prop="snNumber">
                      <el-input
                        v-model="form.snNumber"
                        placeholder="请输入SN号"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="ip地址" prop="ipAddr">
                      <el-input
                        v-model="form.ipAddr"
                        placeholder="输入ip地址"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="所在位置" prop="location">
                      <el-input
                        v-model="form.location"
                        placeholder="输入所在位置"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="协议类型" prop="agreementType">
                      <el-select
                        v-model="form.agreementType"
                        popper-class="global-select"
                        placeholder="请选择协议类型"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in agreementTypeData"
                          :key="item.id"
                          :label="item.dictText"
                          :value="item.dictValue"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="18">
                    <el-form-item label="维保单位" prop="maintenanceUnit">
                      <el-input
                        v-model="form.maintenanceUnit"
                        placeholder="请输入维保单位"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="维保联系人" prop="maintenancePerson">
                      <el-input
                        v-model="form.maintenancePerson"
                        placeholder="输入维保联系人"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item
                      label="维保联系人电话"
                      prop="maintenancePhone"
                    >
                      <el-input
                        v-model="form.maintenancePhone"
                        placeholder="输入维保联系人"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-form>
      </el-main>

      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="toClose"
        >
          取消
        </el-button>
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit"
        >
          {{ isType === 1 ? "提交" : "修改" }}
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import dataFormMixins from "@/mixins/data-form-mixins";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { validIPAddr } from "@/utils/my-validate";
import systemManageApi from "@/api/system-manage";
import deviceManageApi from "@/api/device-manage";
export default {
  components: {
    Treeselect,
  },
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    isType: {
      type: Number,
      default: 1,
    },
    cameraBrandData: {
      type: Array,
      default: undefined,
    },
    deptTreeDataList: {
      type: Array,
      default: undefined,
    },
    params: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      submitLoading: false,
      agreementTypeData: [],
      gridTreeDataList: [],
      form: {
        id: "",
        gatewayName: null,
        gatewayModel: "",
        snNumber: "",
        ipAddr: "",
        location: "",
        agreementType: "",
        maintenanceUnit: "",
        maintenancePerson: "",
        maintenancePhone: "",
        deptGuid: "",
        gridMount: "",
      },
      rules: {
        // 摄像头名称
        gatewayName: [{ required: true, message: "不能为空", trigger: "blur" }],
        gatewayModel: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        snNumber: [{ required: true, message: "不能为空", trigger: "blur" }],
        ipAddr: [{ required: true, message: "不能为空", trigger: "blur" }],
        agreementType: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],

        deptGuid: [
          { required: true, message: "请选择所在部门", trigger: "blur" },
        ],
        gridMount: [
          { required: true, message: "请选择所在网格", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    Title() {
      return this.isType === 1
        ? "网关设备 ＞新增"
        : this.isType === 2
        ? "网关设备 ＞修改"
        : "";
    },
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.toClose();
      },
    },
  },
  mounted() {
    if (this.params != null) {
      this.form = { ...this.params.item };
    }
    console.log(this.params)

    this.getAgreementType();
    this.getGridTreeDataList();
    this.getDeptTreeDataList();
  },
  methods: {
    getDeptTreeDataList() {
      deviceManageApi
        .getDeptTree()
        .then((ret) => {
          this.deptTreeDataList = ret.data.data.rows;
          this.deptTreeDataList.forEach((ele) => {
            this.getDeptGuidTree(ele);
          });
          // this.deptTreeLoading = false;
        })
        .catch(() => {
          // this.deptTreeLoading = false;
          this.deptTreeDataList = [];
        });
    },
    getDeptGuidTree(ele) {
      ele.id = ele.guid;
      if (ele.children) {
        ele.children.forEach((chilEle) => {
          this.getDeptGuidTree(chilEle);
        });
      }
    },
    getGridTreeDataList() {
      deviceManageApi
        .getGridTree()
        .then((ret) => {
          this.gridTreeDataList = ret.data.data.rows;
        })
        .catch(() => {
          this.gridTreeDataList = [];
        });
    },
    onGridSelect(node) {
      // console.log('node：',node)
      // this.form.gridMountFullPath = node.fullPath
      this.form.gridName = node.fullPathText ? node.fullPathText : "";
    },
    onDepSelect(node) {
      this.form.deptName = node.label;
    },
    getAgreementType() {
      const data = {
        fieldName: "protocol_type_encoding",
        tableName: "t_equipment_transoport",
      };
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.agreementTypeData = r.data.dictValue;
      });
    },
    toClose() {
      this.$emit("close");
    },
    toSubmit() {
      this.$refs["gatewayForm"].validate((err, values) => {
        if (err) {
          try {
            this.loading = true;
            const params = { ...this.form };
            // if (params.cameraIp && params.cameraIp != "") {
            //   if (!validIPAddr(params.cameraIp)) {
            //     this.$message({
            //       message: "ip地址输入的值不正确，请重新输入",
            //       type: "warning",
            //       duration: 4000,
            //     });
            //     return;
            //   }
            // }
            if(params.id==-1){
              delete params.id
              console.log(params,'新增数据')
            }
            deviceManageApi
              .dealEquipmentGateWay({
                ...params,
              })
              .then(() => {
                let message =
                  this.isType === 1 ? "新增网关设备成功" : "编辑网关设备成功";
                this.$message.success(message);
                // this.afterSubmit();
                this.$emit('submit',this.isType)
              })
              .catch(() => {
                this.loading = false;
              });
            // let message;
            // if (this.isType === 1) {
            //   message = "新增摄像头成功！";
            // } else if (this.isType === 2) {
            //   message = "修改摄像头成功！";

            //   return false;
            // }
            // deviceManageApi
            //   .addEquipmentCamera({
            //     ...params,
            //   })
            //   .then(() => {
            //     this.$message.success(message);
            //     this.toClose();
            //   })
            //   .catch(() => {
            //     this.loading = false;
            //   });
          } catch (error) {
            this.$message.error(error);
          }
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
@import "../../../../../styles/part-custom";
</style>
